<script setup>
import Toast from '@vant/weapp/dist/toast/toast';
import { ref, watch } from 'vue';


const props = defineProps({
    baseImageUrl: {
        type: String,
        default: ''
    },
})


const emits = defineEmits(['uploadImg'])




const queryParams = ref({
    promptType: 2, // 类型
    baseImageUrl: '', // 图片
})

watch(() => props.baseImageUrl, (val) => {
    if (val) {
        queryParams.value.baseImageUrl = val
    }
}, { deep: true, immediate: true })


function getQueryParams() {
    const data = Object.assign({}, queryParams.value)
    return data

}

// 清除图片
function clearImg() {
    queryParams.value.baseImageUrl = ''
    emits('uploadImg', '')
}


// 上传图片
function uplaodImgFn() {
    uni.chooseImage({
        count: 1,
        success(e) {
            queryParams.value.baseImageUrl = e.tempFilePaths[0]
            emits('uploadImg', queryParams.value.baseImageUrl)
        }
    })
}

defineExpose({ getQueryParams })
</script>

<template>
    <div class='bgInstruction'>
        <div class="uploadImg" @click="uplaodImgFn">
            <img v-if="queryParams.baseImageUrl" :src="queryParams.baseImageUrl" mode="aspectFit" class="imgSty" alt="">
            <div class="upload_btn" v-else>
                <i class="iconfont ai-icon-shangchuancankaotu"></i>
                <div class="text">相册选择</div>
            </div>
            <!--删除-->
            <div v-if="queryParams.baseImageUrl" class="clearBox" @click.stop="clearImg">
                <i class="iconfont ai-icon-shanchutupian"></i>
            </div>
        </div>
    </div>
</template>

<style lang='scss' scoped>
.bgInstruction {
    .uploadImg {
        position: relative;
        box-sizing: border-box;
        height: 65vh;
        background: var(--a-main-box-bg-color);
        border-radius: 20rpx;
        margin-top: 22rpx;
        padding: 16rpx 20rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;

        .imgSty {
            display: block;
            width: 100%;
            height: 100%;
            border-radius: 20rpx;
        }

        .upload_btn {
            width: 228rpx;
            height: 84rpx;
            border-radius: 45rpx;
            border: 3rpx solid var(--a-main-color);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10rpx;

            .iconfont {
                font-size: 32rpx;
                color: var(--a-one-text-color);
            }

            .text {
                font-size: 32rpx;
                color: var(--a-one-text-color);
            }
        }

        .clearBox {
            position: absolute;
            bottom: 20rpx;
            right: 20rpx;
            z-index: 999;
            color: var(--a-one-text-color);
            width: 59rpx;
            height: 59rpx;
            background-color: #fff;
            background: rgba(0, 0, 0, 0.3);
            border-radius: 50%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            .iconfont {
                font-size: 36rpx;
            }

            .anewUpload {
                font-size: 22rpx;
            }
        }
    }
}
</style>